<template>
  <div class="app-container">
    <el-form :inline="true" :model="order" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="order.orderNumber" clearable placeholder="订单编号" />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="order.orderStatus" placeholder="选择订单状态" clearable>
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" /></el-select>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="order.userName" clearable placeholder="用户名" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="order.phone" clearable placeholder="手机号" />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="order.value2"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="订单开始时间"
          end-placeholder="订单结束时间"
          align="right"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      class="el-table"
      border
      :data="orderList.list"
      style="width: 98%;"
    >
      <el-table-column
        align="center"
        type="index"
        width="50"
      />
      <el-table-column
        align="center"
        prop="orderNumber"
        label="订单编号"
        width="250"
      />
      <el-table-column
        align="center"
        prop="userName"
        label="用户名"
        width="150"
      />
      <el-table-column
        align="center"
        prop="phone"
        label="手机号"
        width="200"
      />
      <el-table-column
        align="center"
        prop="number"
        label="商品数量"
        width="100"
      />
      <el-table-column
        align="center"
        prop="goodsPrice"
        label="下单金额"
        width="180"
      />
      <el-table-column
        align="center"
        prop="createTime"
        label="下单时间"
        width="220"
      />
      <el-table-column
        align="center"
        prop="orderStatus"
        label="订单状态"
        width="180"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.orderStatus==='1'"
            type="success"
            disable-transitions
          >已支付
          </el-tag>
          <el-tag
            v-if="scope.row.orderStatus==='2'"
            type="primary"
            disable-transitions
          >已完成
          </el-tag>
          <el-tag
            v-if="scope.row.orderStatus==='3' || scope.row.orderStatus==='4'"
            type="info"
            disable-transitions
          >已取消
          </el-tag>
          <el-tag
            v-if="scope.row.orderStatus==='-1'"
            type="warning"
            disable-transitions
          >未支付
          </el-tag>
          <el-tag
            v-if="scope.row.orderStatus==='-3'"
            type="danger"
            disable-transitions
          >退款中
          </el-tag>
          <el-tag
            v-if="scope.row.orderStatus==='-4'"
            type="info"
            disable-transitions
          >已退款
          </el-tag>
          <el-tag
            v-if="scope.row.orderStatus==='-5'"
            type="danger"
            disable-transitions
          >拒绝退款
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            size="mini"
            @click="getOrderInfo(scope.row.orderNumber)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看详情弹窗-->
    <el-dialog title="订单详情" width="40%" top="5vh" :visible.sync="dialogFormVisible">
      <el-form label-position="right" label-width="80px" :model="orderInfo">
        <el-form-item
          label="订单编号 "
        >
          <el-input
            v-model="orderInfo.orderNumber"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="商品清单">
          <el-table
            :data="orderInfo.goodSkuDto"
            max-height="250"
            border
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="goodsName"
              label="商品名称"
              width="180"
            />
            <el-table-column
              align="center"
              label="商品图片"
              width="150"
            >
              <template slot-scope="scope" class="">
                <img class="productImage" :src="scope.row.image">
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="number"
              label="数量"
              width="100"
            />
            <el-table-column
              align="center"
              prop="goodsPrice"
              label="价格"
            />
            <el-table-column
              v-if="orderInfo.isTakes===-1"
              align="center"
              label="状态"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.verificationStatus===0" type="danger">未核销</el-tag>
                <el-tag v-if="scope.row.verificationStatus===1" type="info">已核销</el-tag>
                <el-tag v-if="scope.row.verificationStatus===2" type="info">已退款</el-tag>
              </template>
            </el-table-column>
            <template />
          </el-table>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="orderInfo.userName" :disabled="true" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="orderInfo.phone" :disabled="true" />
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="orderInfo.number" :disabled="true" />
        </el-form-item>
        <el-form-item label="下单金额">
          <el-input v-model="orderInfo.goodsPrice" :disabled="true" />
        </el-form-item>
        <el-form-item label="下单时间">
          <el-input v-model="orderInfo.createTime" :disabled="true" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="orderInfo.orderStatus" placeholder="选择订单状态" :disabled="true">
            <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" /></el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--    分页-->
    <el-pagination
      background
      :current-page="orderList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="orderList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import { getOrderList, getOrderInfo } from '@/api/order'

export default {
  name: 'ComplexTable',
  data() {
    return {
      options: [{
        value: '1',
        label: '已支付'
      }, {
        value: '2',
        label: '已完成'
      }, {
        value: '3',
        label: '已取消'
      }, {
        value: '-1',
        label: '未支付'
      }, {
        value: '-3',
        label: '退款中'
      }, {
        value: '-4',
        label: '已退款'
      }, {
        value: '-5',
        label: '拒绝退款'
      }],
      order: {
        shopId: 4,
        orderNumber: '',
        orderStatus: '',
        value2: [],
        userName: '',
        phone: ''

      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      orderInfo: {}

    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getOrderList()
      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.getOrderList()
    },
    handleNextClick() {
      this.pageNum++
      this.getOrderList()
    },
    handleSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.getOrderList()
    },
    getOrderInfo(orderNumber) {
      this.dialogFormVisible = true
      const parameter = {
        orderNumber: orderNumber
      }
      getOrderInfo(parameter).then(res => {
        this.orderInfo = res.dataMap
      })
    },
    // 获取订单列表
    getOrderList() {
      getOrderList(this.order, this.pageNum, this.pageSize).then(res => {
        this.orderList = res.dataMap
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.productImage{
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.el-select .el-input {
  width: 130px;
}
.el-dialog__body{
  padding:30px 40px;
}
.app-container{
  margin-top: 10px;
}
.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}

</style>
